<template>
    <label @click="toSearch(text)" class="label-box" :style="{'background-color':colorlists[Math.floor(Math.random()*10)]}">{{text}}</label>
</template>

<script>
import router from "@/router";

export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: "label",
    props:['text'],
    setup() {
        const colorlists = [

            'rgb(229, 0, 19)',

            'rgb(206,194,28)',

            'rgb(0,161,233)',

            'rgb(109,185,45)',

            'rgb(166,0,130)',

            'rgb(237,108,0)',

            'rgb(240, 28, 131)',

            'rgb(84, 21, 226)',

            'rgb( 0,128,0)',

            'rgb( 255,69,0)',

            'rgb( 255,165,0)',

            'rgb( 178,34,34)',

            'rgb( 255,0,255)',

            'rgb(65,105,225)',

            'blueviolet'

        ]

        function toSearch(text) {
            router.push({path: '/comicSearch', query: {keyword: text}})
        }

        return {
            colorlists,
            toSearch
        }
    }
}
</script>

<style scoped>

.label-box {
    margin: 2px;
    height: 12px;
    width: fit-content;
    border-radius: 15px;
    padding: 8px;
    font-size: small;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
</style>